<template>
  <div class="goodsWrap">
    <div v-show="messageInfo.left">
      <div class="messageBox" :style="{left: (messageInfo.left<50?80:messageInfo.left)+'px', top: messageInfo.top+'px'}">
        <span>{{'物料编号：'+ (messageInfo.wmsStockList?.[0].materialCode|| 0)}}</span>
        <span>{{'物料名称：'+ (messageInfo.wmsStockList?.[0].materialName|| '无')}}</span>
        <span>{{'物料重量：'+ (messageInfo.wmsStockList?.[0].quantity|| '')+(messageInfo.wmsStockList?.[0].materialUnit|| '')}}</span>
      </div>
    </div>
    <div 
      v-for="(item, index) in datas" 
      :key="index" 
      :class="'goodItem goodItem' + item.goodsStatus" 
      :style="{left:item.left+'px', top:item.top+'px'}"
      @click="openMessageBox(item)"
    >{{goodText[item.goodsStatus]}}</div>
  </div>
</template>

<script>
export default {
  props: ['datas', ],
  data() {
    return {
      goodText: ['空闲', '占用', '分配', '停用'],
      showCarInfo: false,
      messageInfo: {
        left: 0,
        top: 0,
      }
    }
  },

  methods: {
    openMessageBox(data) { //materialCode materialName quantity  materialUnit
      console.log(data)
      if(!this.messageInfo || this.messageInfo.location != data.location) {
        this.messageInfo = {...data} 
      }else {
        this.messageInfo = {
          left: 0,
          top: 0,
        }
      }
    },
  }
}
</script>

<style lang="scss" scoped>
.goodsWrap{
  position: relative;
  // background: rgba($color: #000000, $alpha: 0.5);
  cursor: pointer;
  .goodItem{
    position: absolute;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    // background: linear-gradient( 90deg, #79A2FF 0%, #4C82FF 100%);
    // box-shadow: 0px 0px 10px 0px rgba(213,225,238,0.4);
    text-align: center;
    font-size: 16px;
    line-height: 56px;
    // color: #fff;
    // cursor: pointer;
    z-index: 1;
  }
  .goodItem1{ 
    background: linear-gradient( 90deg, #79A2FF 0%, #4C82FF 100%);
    box-shadow: 0px 0px 10px 0px rgba(213,225,238,0.4);
    color: #fff;
  }
   .goodItem0{ 
    background: #001366;
    box-shadow: 0px 0px 10px 0px rgba(232, 234, 236, 0.4);
    color: #fff;
  }
   .goodItem2{ 
    background: #001366;
    box-shadow: 0px 0px 10px 0px rgba(243, 247, 250, 0.4);
    color: #FA9632;
  }
   .goodItem3{ 
    background: #001366;
    box-shadow: 0px 0px 10px 0px rgba(227, 232, 238, 0.4);
    color: #F53F3F;
  }
  .messageBox{
    width: 280px;
    height: 100px;
    background: rgba(0,19,102,0.9);
    box-shadow: inset 0px 1px 30px 0px #44D7B6;
    border-radius: 16px;
    border: 1px solid #44D7B6;
    position: absolute;
    z-index: 111;
    padding-left: 20px;
    justify-content: center;
    display: flex;
    flex-direction: column;
    transform: translate(-30%, -100%);
    span{
      margin-bottom: 5px;
      color: #fff;
      font-size: 14px;
    }
  }
}
</style>